<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <!-- <el-button type="primary" @click="onQuery">统计</el-button> -->
        <el-button
          @click="exportExcel"
          :disabled="!buttonsPermissions.DaoChu"
          :class="!buttonsPermissions.DaoChu ? 'disabled_button' : ''"
          >导出</el-button
        >
        <el-button
          :disabled="!buttonsPermissions.DaYin"
          :class="!buttonsPermissions.DaYin ? 'disabled_button' : ''"
          @click="handleShortcutKeyPrint"
          >打印(P)</el-button
        >
      </div>
      <div class="btn_right">
        <el-input v-model="queryData.companyName" :placeholder="`请输入${baseText}名称\商品名称\关键字搜索`" />
        <el-button type="primary" @click="onQuery">搜索</el-button>
        <el-button @click="onRefresh">刷新</el-button>
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_screen">
        <div class="screen_left">
          <div class="custom_item">
            <div class="item_title">商品名称</div>
            <div class="custom_select_head" v-if="queryData.goodsName.length <= 6">
              <el-select
                v-model="queryData.goodsId"
                style="width: 100%"
                filterable
                ref="goodsname"
                @visible-change="(value) => handleFilterMethod('', 'goodsName')"
                :filter-method="(value) => handleFilterMethod(value, 'goodsName')"
              >
                <el-option
                  v-for="item in spmcOptions"
                  :key="item.id"
                  :label="item.goodsName"
                  :value="item.id"
                ></el-option>
              </el-select>
              <div class="custom_more">
                <i class="el-icon-more" @click.stop="onShowCommodity"></i>
              </div>
            </div>
            <el-tooltip v-else effect="dark" :content="queryData.goodsName" :enterable="false" placement="bottom-start">
              <div class="custom_select_head">
                <el-select v-model="queryData.goodsId" style="width: 100%" filterable ref="goodsname">
                  <el-option
                    v-for="item in spmcOptions"
                    :key="item.id"
                    :label="item.goodsName"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <div class="custom_more">
                  <i class="el-icon-more" @click.stop="onShowCommodity"></i>
                </div>
              </div>
            </el-tooltip>
          </div>
          <div class="custom_item">
            <div class="item_title">商品类别</div>
            <div class="custom_select_head">
              <el-select v-model="queryData.goodsTypeId" style="width: 100%" filterable>
                <el-option
                  v-for="item in splbOptions"
                  :key="item.id"
                  :label="item.goodsTypeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="custom_item">
            <div class="item_title">仓库</div>
            <div class="custom_select_head">
              <el-select
                v-model="queryData.storehouseId"
                ref="cangku"
                filterable
                @visible-change="(value) => handleFilterMethod('', 'storehouseName')"
                :filter-method="(value) => handleFilterMethod(value, 'storehouseName')"
              >
                <el-option
                  class="add_select"
                  v-for="item in ckOptions"
                  :key="item.id"
                  :label="item.storehouseName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <!-- 经手人 -->
          <div class="custom_item">
            <div class="item_title">经手人</div>
            <div class="custom_select_head">
              <el-select
                v-model="queryData.userId"
                style="width: 100%"
                filterable
                ref="yewuyuan"
                @visible-change="(value) => handleFilterMethod('', 'realname')"
                :filter-method="(value) => handleFilterMethod(value, 'realname')"
              >
                <el-option
                  v-for="item in jsrOptions"
                  :key="item.id"
                  :label="item.realname"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="screen_right">
          <div class="custom_select_head" style="width: 80px; margin-right: 10px">
            <el-select @change="changeDate" v-model="monthValue">
              <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </div>
          <div class="custom_select_head">
            <el-date-picker
              v-model="nowDate"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onClickPicker"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </div>
          <el-button type="primary" @click="onQuery">查询</el-button>
        </div>
      </div>
      <!-- 第二层 -->
      <div style="display: flex; justify-content: space-between; height: 50px">
        <div style="display: flex; height: 50px">
          <div class="custom_item">
            <div class="item_title">{{ baseText }}</div>
            <div class="custom_select_head">
              <el-select
                v-model="queryData.companyId"
                filterable
                @visible-change="(value) => handleFilterMethod('', 'companyName')"
                :filter-method="(value) => handleFilterMethod(value, 'companyName')"
              >
                <el-option
                  v-for="item in wldwOptions"
                  :key="item.id"
                  :label="item.companyName"
                  :value="item.id"
                ></el-option>
              </el-select>
              <div class="custom_more">
                <i class="el-icon-more" @click.stop="onShowSupplier"></i>
              </div>
            </div>
          </div>
          <div class="custom_item">
            <div class="item_title">统计方式</div>
            <div class="custom_select_head">
              <el-select v-model="queryData.countType" @change="onChangeTjfs">
                <el-option
                  v-for="item in tjfsOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="custom_item" style="width: auto">
            <div class="custom_select_head">
              <el-checkbox v-model="queryData.showCompanyType" @change="getTableData(1)"
                >显示{{ baseText}}类别的统计结果</el-checkbox
              >
            </div>
          </div>
          <div class="custom_item" style="width: 130px">
            <div class="custom_select_head">
              <el-checkbox v-model="queryData.showZero" @change="getTableData(1)">显示数量为0的记录</el-checkbox>
            </div>
          </div>
        </div>
        <!-- 统计范围 -->
        <div class="custom_item" style="width: auto">
          <div class="item_title" style="margin-right: 0.1rem">统计范围</div>
          <div class="custom_select_head">
            <el-checkbox-group v-model="queryData.countRange" :min="1" style="display: flex">
              <el-checkbox v-for="item in tjfwOptions" :label="item.value" :key="item.value">{{
                item.label
              }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div class="div_table">
        <div class="div_tree">
          <div class="tree_div1">
            <p>{{baseText}}类别</p>
          </div>
          <div class="tree_input">
            <p>
              <input type="text" placeholder="查找" v-model="filterText" />
              <span @click="onFindTree()">
                <i class="el-icon-search"></i>
              </span>
            </p>
          </div>
          <div class="tree_structure">
            <el-tree
              ref="tree"
              :data="treeData"
              node-key="label"
              :props="defaultProps"
              highlight-current
              default-expand-all
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              :filter-node-method="filterNode"
            ></el-tree>
          </div>
        </div>
        <div class="table_content">
          <el-table
            ref="tableRef"
            show-summary
            :summary-method="getSummaries"
            highlight-current-row
            :header-cell-style="{
              color: '#666666',
              textAlign: 'center',
              height: '30px',
              borderColor: '#dddddd',
            }"
            :data="tableData.records"
            height="100%"
          >
            <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column>
            <template v-for="(item, index) in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="index"
                :label="getColumnTitle(item)"
                v-if="item.zidingyiState"
                :prop="item.props"
                min-width="130px"
                :sortable="item.sortable"
                :width="item.props == 'orderNumber' ? '170px' : ''"
              >
                <template slot-scope="scope">
                  <span
                    v-if="
                      item.props == 'discountAmount' ||
                      item.props == 'salePrice' ||
                      item.props == 'discountPrice' ||
                      item.props == 'taxPrice' ||
                      item.props == 'taxAmount' ||
                      item.props == 'costPrice' ||
                      item.props == 'grossProfit' ||
                      item.props == 'giftPrice'
                    "
                  >
                    {{ $formatMoney(scope.row[item.props]) }}
                  </span>
                  <span v-else-if="item.props == 'saleNum' || item.props == 'giftNumber'">
                    {{ $formatNumber(scope.row[item.props]) }}
                  </span>
                  <span
                    v-else-if="
                      item.props == 'saleAveragePrice' ||
                      item.props == 'discountAveragePrice' ||
                      item.props == 'taxAveragePrice'
                    "
                  >
                    {{ $formatPrice(scope.row[item.props]) }}
                  </span>
                  <span v-else>{{ scope.row[item.props] }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
      </div>
      <div class="table_pagination">
        <div class="pagination_div">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="pagesize"
            layout="jumper, prev, pager,next, sizes"
            :total="tableData.total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="columnData"
      :defaultColumnDataArr="defaultColumnData"
      :orderType="pageName"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 选择商品弹框 -->
    <DialogCommoditySingle ref="commodityRef" @onSelectCommodity="onSelectCommodity"></DialogCommoditySingle>
    <!-- 选择往来单位弹框 -->
    <DialogSupplier ref="supplierRef" @onSelectSupplier="onSelectSupplier"></DialogSupplier>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>

<script>
import CConfiguration from '@/components/c_column/columnConfiguration1'
import DialogCommoditySingle from '@/views/components/dialogCommoditySingle'
import DialogSupplier from '../../components/dialogSupplier'
import { getAction, postAction, downPostFile } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
/**打印 */
import dialogPrint from '@/views/components/dialogPrintStatic'
// 导入调用处理权限数据方法
import { handlePermissions, handleOtherPerms, sysConfig, getTreeDataByMap, getLikeCompanyId, handleIsBaseVersion } from '@/utils/index'
import { delcommafy } from '../../../utils'
export default {
  name: 'statisticsByCustomer',
  components: {
    CConfiguration,
    DialogCommoditySingle,
    DialogSupplier,
    dialogPrint,
  },
  mixins: [JeecgListMixin],
  computed: {
    buttonsPermissions() {
      return handlePermissions(this.pageName)
    },
    printPermissions() {
      return handleOtherPerms('单据可多次打印')
    },
  },
  created() {
    this.baseText = handleIsBaseVersion() ? '客户' : '往来单位'
    this.queryData.showZero = sysConfig().show_zero_record
    this.getData()
    // this.buttonsPermissions = handlePermissions(this.pageName)
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    'queryData.goodsId': {
      deep: true,
      handler() {
        this.spmcOptions.forEach((item) => {
          if (item.id == this.queryData.goodsId) {
            this.queryData.goodsName = item.goodsName
          }
        })
      },
    },
  },
  updated() {
    this.$nextTick(() => {
      this.$refs['tableRef'].doLayout()
    })
  },
  data() {
    return {
      baseText: '往来单位',
      pageName: '销售统计(按客户)',
      // 存储按钮权限数据
      // buttonsPermissions: {},
      // 商品名称
      spmcOptions: [],
      ckOptions: [], // 仓库
      splbOptions: [], //商品类别
      jsrOptions: [], //经手人
      wldwOptions: [], // 往来单位
      // 统计范围
      tjfwOptions: [
        {
          value: '6',
          label: '销售出库单',
        },
        {
          value: '7',
          label: '销售退货单',
        },
        {
          value: '8',
          label: '销售换货单',
        },
      ],
      // 统计方式
      tjfsOptions: [
        {
          value: '1',
          label: '按客户',
        },
        {
          value: '2',
          label: '按商品',
        },
        {
          value: '3',
          label: '按经手人',
        },
      ],
      // 查询条件数据
      queryData: {
        //搜索框值
        goodsId: '', // 商品名称
        goodsName: '', // 商品名称
        goodsTypeId: '', // 商品类别id
        storehouseId: '', // 仓库id
        userId: '', // 经手人id
        companyId: '', // 供应商id
        countRange: ['6', '7', '8'], //采购订单1/采购入库单2/采购退货单3/采购换货单4/销售订单5/销售出库单6/销售退货单7/销售换货单8/盘点单9/报损单10
        countType: '1', // 统计方式 销售出库单统计类型：1-按客户 2-按商品 3-按经手人
        showZero: false, // 显示数量为0 1是 0否
        showCompanyType: false, // 是否根据商品类别 1.是 0否
        companyTypeIds: '', //
        // 日期选择范围
        beginTime: '', // 开始时间
        endTime: '', //结束时间
        companyIdParam: '', //模糊供应商id
        companyName: '', // 单位编号/往来单位名
      },
      monthValue: '本月',
      monthOptions: ['今日', '本周', '本月', '本年'],
      nowDate: [],
      // 表格数据
      tableData: {},
      // 列配置数据
      defaultColumnData: [],
      columnData: [
        {
          morenName: '往来单位编号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'companyNumber',
          sortable: 'custom',
        },
        {
          morenName: '往来单位名称',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'companyName',
        },
        {
          morenName: '销售数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'saleNum',
          sortable: 'custom',
        },
        {
          morenName: '销售均价',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'saleAveragePrice',
          sortable: 'custom',
        },
        {
          morenName: '销售金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'salePrice',
          sortable: 'custom',
        },
        {
          morenName: '优惠金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'discountAmount',
          sortable: 'custom',
        },
        {
          morenName: '折后均价',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'discountAveragePrice',
          sortable: 'custom',
        },
        {
          morenName: '折后金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'discountPrice',
          sortable: 'custom',
        },
        {
          morenName: '含税均价',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'taxAveragePrice',
          sortable: 'custom',
        },
        {
          morenName: '含税金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'taxPrice',
          sortable: 'custom',
        },
        {
          morenName: '税额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'taxAmount',
        },
        {
          morenName: '成本金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'costPrice',
        },
        {
          morenName: '赠品数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'giftNumber',
        },
        {
          morenName: '赠品金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'giftPrice',
        },
        {
          morenName: '毛利',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'grossProfit',
        },
        {
          morenName: '毛利率(%)',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'grossProfitRate',
        },
        {
          morenName: '联系人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'realname',
        },
        {
          morenName: '联系电话',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'phone',
        },
      ],
      filterText: '', // 往来单位类别查找值
      // 类别数据
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'companyTypeName',
      },
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      updateId: '', // 修改列配置时返回的id
      url: {
        exportXlsUrl: '/xghSaleStorehouseOrder/xghSaleStorehouseOrder/exportSaleCountXls',
        api: '销售统计(按客户)',
      },
      tempArr: [],
    }
  },
  mounted() {},
  methods: {
    getColumnTitle(item) {
      if (item.zidingyiName) {
        return item.zidingyiName
      } else if (handleIsBaseVersion()) {
        return (item.morenName || '').replace('往来单位', '客户')
      }
      return item.morenName
    },
    async handleShortcutKeyPrint() {
      // 查询
      let data = {
        ...this.queryData,
        countRange: this.queryData.countRange.join(','),
        companyIdParam: getLikeCompanyId(this.wldwOptions, this.queryData.companyName),
        pageSize: 1000000,
        pageNo: 1,
      }
      let printExclusive = []
      const res = await getAction('/xghSaleStorehouseOrder/xghSaleStorehouseOrder/saleStorehouseCount', data)
      if (res.code !== 200) {
        return this.$elMessage.error('获取数据失败！')
      }
      const pricearr = ['saleAveragePrice', 'discountAveragePrice', 'taxAveragePrice']
      const monarr = [
        'discountAmount',
        'discountPrice',
        'taxPrice',
        'taxAmount',
        'costPrice',
        'grossProfit',
        'giftPrice',
        'salePrice',
      ]
      const numarr = ['saleNum', 'giftNumber']
      printExclusive = (res.result.records || []).map((item) => {
        // 遍历 item 对象的键
        Object.keys(item).map((key) => {
          console.log('key', key)
          if (numarr.includes(key)) {
            item[key] = this.$formatNumber(item[key])
          } else if (monarr.includes(key)) {
            item[key] = this.$formatMoney(item[key])
          } else if (pricearr.includes(key)) {
            item[key] = this.$formatPrice(item[key])
          }
        })
        return item
      })
      this.onQuery()
      // 打印
      if (!this.buttonsPermissions.DaYin) {
        this.$elMessage.warning('未拥有打印权限！')
      } else if (!printExclusive || printExclusive.length <= 0) {
        this.$elMessage.warning('没有要打印的记录！')
      } else {
        let printData = {
          riqi: this.queryData.beginTime + '~' + this.queryData.endTime,
          goodsname: this.$refs.goodsname.selected.label,
          cangku: this.$refs.cangku.selected.label,
          yewuyuan: this.$refs.yewuyuan.selected.label,
          printExclusive,
        }
        // 可以多次打印设置
        if (this.printPermissions) {
          this.$refs.print.show(printData, this.columnData, this.pageName)
        } else {
          if (this.$lcStorage.get('printLimitValue')) {
            // 获取打印次数
            this.getPrintNum(this.pageName, () => {
              this.$refs.print.show(printData, this.columnData, this.pageName)
            })
          } else {
            this.$refs.print.show(printData, this.columnData, this.pageName)
          }
        }
      }
    },
    // 初始化获取数据
    getData() {
      this.getTimeRange(this.$setTimeRange(5)) // 默认获取当月时间
      this.getTableData(1) // 获取表格信息数据
      this.getTreeData() // 获取往来单位类别数据
      this.getGysStorage() // 获取客户信息数据
      this.getWarehouseData() // 获取仓库信息数据
      this.getStaffData() // 获取经手人信息数据
      this.getGoodsTypeList()
      this.getGoodsNameList()
      this.selectTitle()
    },
    filterNode(value, data) {
      if (!value) return true
      return data.companyTypeName.indexOf(value) !== -1
    },
    // 触发列配置弹框
    onShowColumn() {
      this.defaultColumnData = this.$options.data().columnData
      if (handleIsBaseVersion()) {
        this.defaultColumnData = this.defaultColumnData.filter(el => !['成本金额', '毛利', '毛利率(%)'].includes(el.morenName))
      }
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 初始化查询列配置值
    async selectTitle() {
      let obj = await this.$setColumn.selectColumn(this.url.api)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.url.api, this.columnData, 0, this.updateId)
        this.updateId = id
      }
      if (handleIsBaseVersion()) {
        this.columnData = this.columnData.filter(el => !['成本金额', '毛利', '毛利率(%)'].includes(el.morenName))
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      this.columnData = value
      let res = await this.$setColumn.editColumn(this.url.api, this.columnData, this.updateId)
      if (res.code == 200) {
        this.$elMessage.success(res.message)
      } else {
        this.$elMessage.error(res.message)
      }
      if (handleIsBaseVersion()) {
        this.columnData = this.columnData.filter(el => !['成本金额', '毛利', '毛利率(%)'].includes(el.morenName))
      }
    },
    // 获取类别数据
    getTreeData() {
      getAction('/xghCompanyType/xghCompanyType/childList', {}).then((res) => {
        if (res.code === 200) {
          this.tempArr = res.result || []
          let result = getTreeDataByMap(this.tempArr)
          this.treeData = [
            {
              id: '0',
              companyTypeName: '全部',
              children: result,
            },
          ]
        }
      })
    },
    // 获取表格信息数据
    async getTableData(page) {
      if (page == 1) {
        this.currentPage = 1
      }
      let data = {
        ...this.queryData,
        countRange: this.queryData.countRange.join(','),
        companyIdParam: getLikeCompanyId(this.wldwOptions, this.queryData.companyName),
        pageSize: this.pagesize,
        pageNo: this.currentPage,
      }
      const res = await getAction('/xghSaleStorehouseOrder/xghSaleStorehouseOrder/saleStorehouseCount', data)
      if (res.code !== 200) {
        return this.$elMessage.error('获取数据失败！')
      }
      this.tableData = res.result
      this.tableData.records.forEach((item) => {})
    },
    // 供应商
    getGysStorage() {
      getAction('/xghCompany/xghCompany/listNoPage', {}).then((res) => {
        if (res.code === 200) {
          this.wldwOptions = res.result
          this.totalCompanys = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 获取所有仓库数据
    getWarehouseData() {
      getAction('/xghStorehouse/xghStorehouse/queryListByPole', {}).then((res) => {
        if (res.code === 200) {
          this.ckOptions = res.result
          this.totalStores = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 获取所有员工数据
    getStaffData() {
      getAction('/dept/xghAccountBookDept/getAllDeptUsers', {}).then((res) => {
        if (res.code === 200) {
          this.jsrOptions = res.result
          this.totalPersons = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    getGoodsTypeList() {
      getAction('/xghGoodsType/xghGoodsType/typeList', {}).then((res) => {
        if (res.code === 200) {
          this.splbOptions = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    getGoodsNameList() {
      getAction('/xghGoods/xghGoods/getGoodsNameList', {}).then((res) => {
        if (res.code === 200) {
          this.spmcOptions = res.result
          this.totalGoods = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },

    // 导出
    exportExcel() {
      let params = {
        ...this.queryData,
        countRange: this.queryData.countRange.join(','),
        companyIdParam: getLikeCompanyId(this.wldwOptions, this.queryData.companyName),
        fileName: this.pageName,
      }
      this.handleExportXlsByStaff(this.pageName, params)
    },
    // 统计/搜索/查询
    onQuery() {
      this.getTableData(1)
    },
    // 刷新
    onRefresh() {
      Object.assign(this.$data, this.$options.data())
      this.queryData.showZero = sysConfig().show_zero_record
      // this.buttonsPermissions = handlePermissions(this.pageName)
      this.getData()
    },
    // 打开选择商品弹出框
    onShowCommodity() {
      this.$refs.commodityRef.dialogVisible = true
    },
    // 当前选择商品数据
    onSelectCommodity(val) {
      this.queryData.goodsId = val.id
      this.queryData.goodsName = val.goodsName
    },
    // 打开选择往来单位弹出框
    onShowSupplier() {
      this.$refs.supplierRef.dialogVisible = true
    },
    // 当前选择往来单位数据
    onSelectSupplier(val) {
      this.queryData.companyId = val.id
    },
    // 单据状态改变
    onChangeQueryData() {
      this.getTableData(1)
    },
    // 统计方式改变
    onChangeTjfs(val) {
      // 统计方式 销售出库单统计类型：1-按客户 2-按商品 3-按经手人

      if (val == 2) {
        this.$router.push({
          path: '/reportStatistics/salesReport/salesStatisticsByCommodity',
        })
      } else if (val == 3) {
        this.$router.push({
          path: '/reportStatistics/salesReport/statisticsBySalesman',
        })
      }
      this.queryData.countType = '1'
    },
    // 搜索树形结构数据
    onFindTree() {
      this.getTreeData()
    },
    // 触发树形当前节点
    handleNodeClick(data) {
      console.log(data)
      if (data.id == 0) {
        this.queryData.companyTypeIds = ''
      } else {
        let result = [data.id]
        this.getSubData(data.children, result)
        this.queryData.companyTypeIds = result.join(',')
      }
      this.getTableData(1)
    },
    getSubData(list = [], result) {
      for (let index = 0; index < list.length; index++) {
        const item = list[index]
        result.push(item.id)
        if (item.hasChild == 1) {
          this.getSubData(item.children, result)
        }
      }
    },
    // 判断当前选择时间段
    changeDate(val) {
      switch (val) {
        case '全部':
          this.queryData.beginTime = ''
          this.queryData.endTime = ''
          break
        case '今日':
          this.getTimeRange(this.$setTimeRange(1))
          break
        case '昨天':
          this.getTimeRange(this.$setTimeRange(2))
          break
        case '本周':
          this.getTimeRange(this.$setTimeRange(3))
          break
        case '上周':
          this.getTimeRange(this.$setTimeRange(4))
          break
        case '本月':
          this.getTimeRange(this.$setTimeRange(5))
          break
        case '上月':
          this.getTimeRange(this.$setTimeRange(6))
          break
        case '本年':
          this.getTimeRange(this.$setTimeRange(7))
          break
        case '去年':
          this.getTimeRange(this.$setTimeRange(8))
          break
        default:
          break
      }
    },
    // 获取时间范围并设置
    getTimeRange(data) {
      this.nowDate = [data.now, data.end]
      this.queryData.beginTime = data.now
      this.queryData.endTime = data.end
    },
    // 获取当前选中时间
    onClickPicker(val) {
      this.queryData.beginTime = val[0]
      this.queryData.endTime = val[1]
      this.getTableData(1)
    },
    
    // 合计列计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      const arr = [
        'discountAmount',
        'discountPrice',
        'taxPrice',
        'taxAmount',
        'costPrice',
        'grossProfit',
        'giftPrice',
        'saleNum',
        'giftNumber',
        'salePrice',
      ]
      const monarr = [
        'discountAmount',
        'discountPrice',
        'taxPrice',
        'taxAmount',
        'costPrice',
        'grossProfit',
        'giftPrice',
        'salePrice',
      ]
      const numarr = ['saleNum', 'giftNumber']
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.tableData.total + '条明细'
        } else if (arr.indexOf(column.property) > -1) {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            if (monarr.indexOf(column.property) > -1) {
              sums[index] = this.$formatMoney(sums[index])
            } else if (numarr.indexOf(column.property) > -1) {
              sums[index] = this.$formatNumber(sums[index])
            } else {
              sums[index] = this.$formatPrice(sums[index])
            }
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.pagesize = val
      this.getTableData(1)
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTableData()
    },
    // 历史记录数据去重并只展示三个数据方法
    selectDataHas(arr) {
      let map = new Map()
      for (const item of arr) {
        if (!map.has(item.id)) {
          map.set(item.id, item)
        }
      }
      let newArr = [...map.values()]
      return newArr.slice(0, 3)
    },
    // 搜索
    handleFilterMethod(value, label) {
      if (label == 'companyName') {
        this.wldwOptions = this.filterMethod(this.wldwOptions, value, label)
      } else if (label == 'storehouseName') {
        this.ckOptions = this.filterMethod(this.ckOptions, value, label)
      } else if (label == 'realname') {
        this.jsrOptions = this.filterMethod(this.jsrOptions, value, label)
      } else if (label == 'goodsName') {
        this.spmcOptions = this.filterMethod(this.spmcOptions, value, label)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: calc(100vh - 102px);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;

  .el-button {
    width: 70px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    margin-right: 6px;
  }

  .el-button--default {
    color: #666;
  }
}

.info_operation_btn {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;

  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-input {
      width: 250px;
      height: 30px;
      margin-right: 0.112507rem;

      ::v-deep .el-input__inner {
        height: 30px;
        border: none;
        box-sizing: border-box;
        padding: 0 0.15rem;
        background: #fff;
        font-size: 12px;
        color: #666;

        &::placeholder {
          font-size: 12px;
          color: #c1c1c1;
        }
      }
    }

    .set_up {
      font-size: 0.375023rem;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 60px);
  // height: calc(100% - 50px);
  background: #fff;
  box-sizing: border-box;
  padding: 0 0.168761rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .div_screen {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    .screen_left {
      height: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      min-width: 800px;
    }

    .screen_right {
      display: flex;
      align-items: center;
    }
  }

  .div_table {
    width: 100%;
    height: calc(100% - 160px);
    margin-top: 10px;
    display: flex;
    box-sizing: border-box;

    .div_tree {
      width: 2.812676rem;
      height: 100%;
      box-sizing: border-box;
      padding: 0.131258rem 0;
      border: 0.018751rem solid #e3e3e3;
      transition: all 0.3s;

      .tree_div1 {
        width: 100%;
        height: 30px;
        padding: 0 0.168761rem;
        color: #666666;
        font-size: 12px;
      }

      .tree_input {
        width: 100%;
        height: 30px;
        box-sizing: border-box;
        padding: 0 10px;

        p {
          width: 100%;
          height: 30px;
          margin: 0;
          box-sizing: border-box;
          border: 1px solid #dddddd;
          display: flex;
          align-items: center;
          position: relative;

          input {
            width: 100%;
            box-sizing: border-box;
            padding: 0 0.600038rem 0 0.093756rem;
            height: 28px;
            border: none;
            font-size: 12px;
            color: #666;

            &:focus {
              outline: none;
            }
          }

          span {
            position: absolute;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 0.562535rem;
            height: 28px;
            background: #fff;

            .el-icon-search {
              font-size: 20px;
              color: rgb(211, 211, 211);
            }
          }
        }
      }

      .tree_structure {
        width: 100%;
        height: calc(100% - 60px);
        box-sizing: border-box;
        padding: 0 0.168761rem;
        margin-top: 0.131258rem;
        overflow: auto;

        ::v-deep .el-tree {
          width: 100%;

          .el-tree-node__children {
            .el-tree-node__label {
              color: #666;
              font-weight: normal;
            }
          }

          .el-tree-node__label {
            font-size: 12px;
            font-weight: 600;
          }

          .el-tree-node__content > .el-tree-node__expand-icon {
            padding-left: 0;
          }
        }
      }
    }

    .table_content {
      width: calc(100% - 3.000188rem);
      margin-left: 0.187512rem;
      height: 100%;

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        border-bottom: none;
        box-sizing: border-box;
        height: 100%;

        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          .cell {
            line-height: 30px;
            display: flex;
            align-items: center;
            font-size: 12px;
          }

          &:first-child {
            .cell {
              justify-content: center;
              padding: 0;
            }
          }

          &:nth-child(2) {
            .cell {
              justify-content: center;
            }
          }

          &:last-child {
            .cell {
              justify-content: center;
            }
          }
        }

        th {
          .cell {
            // background: #ededed;
            justify-content: center;
          }
        }

        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }

        .el-icon-edit-outline {
          font-size: 12px;
          color: #1b93f9;
          margin-right: 0.037502rem;
        }

        .el-icon-delete {
          font-size: 0.25rem;
          color: #ff2626;
          margin-left: 0.037502rem;
        }

        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        .el-table__header {
          tr {
            &:last-child {
              th {
                background: rgb(237, 237, 237) !important;
              }
            }
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }
  }

  .table_pagination {
    width: 100%;
    // height: 1.12507rem;
    height: 60px;
    box-sizing: border-box;
    padding: 0.168761rem 0;
    display: flex;

    .pagination_div {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      ::v-deep .el-pagination {
        padding: 0;
        height: 0.525033rem;

        .el-pagination__sizes {
          margin: 0;

          .el-input {
            margin-right: 0;
          }
        }
      }
    }
  }
}

.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}

.custom_item {
  display: flex;
  align-items: center;
  margin: 10px 10px 10px 0;
  width: 180px;
  font-size: 12px;
}

.item_title {
  width: auto;
  min-width: 60px;
  padding: 0 5px;
  line-height: 30px;
  font-size: 12px;
  color: #666666;
  text-justify: distribute-all-lines;
  /*ie6-8*/
  text-align-last: justify;
  /* ie9*/
  -moz-text-align-last: justify;
  /*ff*/
  -webkit-text-align-last: justify;
  /*chrome 20+*/
}

.custom_select_head {
  flex: 1;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;

  ::v-deep .el-select {
    .el-input {
      .el-input__inner {
        height: 30px;
        border-color: #e3e3e3;
        font-size: 12px;
        padding-left: 8px;
      }

      .el-input__suffix {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }

  ::v-deep .el-checkbox {
    display: flex;
    align-items: center;
    margin-right: 0.25rem;

    .el-checkbox__input {
      height: 30px;
      display: flex;
      align-items: center;
    }

    .el-checkbox__label {
      font-size: 12px;
      padding-left: 3px;
      color: #666;
    }

    .is-checked {
      .el-checkbox__inner {
        background: #1a93fa;
        border-color: #1a93fa;
      }
    }
  }

  ::v-deep .el-input {
    width: 100%;

    .el-input__inner {
      height: 30px;
      border-color: #e3e3e3;
      font-size: 12px;
      padding-left: 5px;
    }

    .el-input__suffix {
      height: 30px;
      display: flex;
      align-items: center;
    }
  }

  ::v-deep .el-date-editor {
    width: 3.375211rem;
    height: 30px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    margin-right: 0.112507rem;
    padding: 3px 6px;

    .el-range__icon {
      position: absolute;
      right: 0;
      line-height: 30px;
    }

    .el-range-separator {
      line-height: 24px;
    }

    .el-range-input {
      font-size: 12px;
    }

    .el-range__close-icon {
      display: none;
    }
  }
}

.custom_more {
  position: absolute;
  right: 10px;
  z-index: 10;
  top: 1px;
  background: #fff;
  height: 28px;
  display: flex;
  align-items: center;
  color: #bfbfbf;
}

.custom_add {
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    margin-left: 5px;
    color: #666666;
  }

  i {
    color: #666666;
  }
}
</style>